<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 200px;
				height: 1000px;
				margin: 50px;
				background-color: skyblue;
			}
		</style>
	</head>
	<body>
		<div>

		</div>
		<script type="text/javascript">
			var div = document.querySelector('div');
			//触摸事件
			div.addEventListener('touchstart', function(e) {
				console.log("触摸");
				// console.log(e);
				//touches 正在触摸屏幕的所有手指列表	有多少个触摸点
				//targetTouches 正在触摸当前DOM元素的手指列表	
				//如果监听一个同一个dom元素,则两个数据是一样的
				//changedTouches 手指状态发生改变的列表 从无到有 从有到无

				//获取 第一个手指的数据
				console.log(e.targetTouches[0]);

			});

			//手指在dom节点上移动
			div.addEventListener('touchmove', function() {
				console.log("摸着乱懂");
			});

			//手指离开
			div.addEventListener('touchend', function(e) {
				console.log("磨完了");
				console.log(e);
				//当手指离开屏幕的时候,就没有touches和targetTouches列表
				//但是会有changedTouches
			});
		</script>
	</body>
</html>
